<template>
  <span class="screenWarp">
    <el-popover
      placement="bottom"
      width="368"
      v-model="screenOut"
      popper-class="SF_popper"
      :popper-options="{ boundariesElement: 'body' }"
      transition="fade-in-linear"
      trigger="click"
    >
      <div class="screenFilter"><slot name="search_label"></slot></div>
      <el-button
        icon="el-icon-d-arrow-right"
        :class="['advance_search', { 'open-tooltip': screenOut }]"
        slot="reference"
        plain
        type="primary"
        size="small"
        >筛选过滤</el-button
      >
    </el-popover>
  </span>
</template>
<script>
export default {
  props: ["searchCourseForm", "btnName"],
  data() {
    return {
      screenOut: false, // 显示隐藏
      isScroll: 0
    };
  },
  mounted: function() {
    let that = this;

    $(".screenFilter").scroll(function() {
      let scrollTop = $(".screenFilter").scrollTop();
      // 监听select cascader date-picker 弹出层 跟随滚动条滚动
      if (
        ($(".el-popper")
          .last()
          .hasClass("el-select-dropdown") &&
          $(".el-popper")
            .last()
            .css("display") != "none") ||
        ($(".el-popper")
          .last()
          .hasClass("el-cascader-menus") &&
          $(".el-popper")
            .last()
            .css("display") != "none") ||
        ($(".el-popper")
          .last()
          .hasClass("el-date-picker") &&
          $(".el-popper")
            .last()
            .css("display") != "none")
      ) {
        let top = parseFloat(
          $(".el-popper")
            .last()
            .css("top")
        );
        if (that.isScroll <= scrollTop) {
          let changeTop = scrollTop - that.isScroll;
          $(".el-popper")
            .last()
            .css("top", top - changeTop + "px");
        } else {
          let changeTop = that.isScroll - scrollTop;
          $(".el-popper")
            .last()
            .css("top", top + changeTop + "px");
        }
        that.isScroll = scrollTop;
      } else {
        that.isScroll = scrollTop;
      }
    });
  },
  methods: {},
  beforeDestroy: function() {
    $(".screenFilter").off("scroll");
  }
};
</script>

<style lang="less" scoped>
@import "../../assets/css/search.css";
.screenFilter {
  max-height: 483px;
  overflow-y: auto;
  /deep/.el-main {
    padding: 6px 0;
  }
  /deep/.el-form-item {
    margin-bottom: 16px;
  }
  /deep/.el-form-item:last-child {
    margin-bottom: 10px;
  }
}
</style>
<style>
.SF_popper {
  left: -135px !important;
}
.SF_popper.el-popper[x-placement^="bottom"] .popper__arrow {
  left: 336px !important;
}
.SF_popper.el-popper[x-placement^="bottom"] .screenFilter .popper__arrow {
  left: 30px !important;
}
.el-popover {
  padding: 0;
}
</style>
